<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <!-- <link rel="stylesheet" href="css/font_byta7fgc0u4/iconfont.css"> -->
    <link rel="stylesheet" href="css/list1.css">
    <title>主持人_-_筛选列表</title>
</head>

<body>
    <!-- 顶部导航布局开始 -->
    <div>
        <div class="nav_login">
            <div class="juzhong">
                <p>Ting域主持人欢迎您！ 客服：18812345678</p>
                <p class="p_login"> <a href="#"> 登录 | 注册</a></p>
            </div>
        </div>
        <div class="nav_logo">
            <div class="juzhong">
                <img src="./img/logo.jpg" alt="">
            </div>
        </div>
        <div class="nav_img">
            <img src="./img/主持人_-_筛选列表_02.jpg" alt="">
        </div>
        <div class="nav_label">
            <div class="juzhong">
                <ui>
                    <li> <a href="#">首页</a> </li>
                    <li> <a href="#">主持人</a> </li>
                    <li> <a href="#">加入我们</a> </li>
                    <li> <a href="#">关于我们</a> </li>
                </ui>
            </div>
        </div>
    </div>
    <!-- 顶部导航布局结束 -->
    <!-- 中间内容开始 -->
    <div class='content'>
        <div class="warp">
            <!-- 主持人表单开始    -->
            <div class="anchor_from">
                <div class="anchor_top">
                    <span>日期时间：</span>
                    <select name="date" id="" class='select_date'>
                        <option value="">2019年10月1日</option>
                    </select>
                    <select name="date" id="" class='select_date'></select>
                </div>
                <div class="anchor_cont">
                    <div class='cont_top'>
                        <span class='dianli'>典礼类型：</span>
                        <span><a href="#">不限</a></span>
                        <span><a href="#">西式婚礼</a></span>
                        <span><a href="#">中式婚礼</a></span>
                        <span><a href="#">汉唐婚礼</a></span>
                        <span><a href="#">商务主持</a></span>
                        <span><a href="#">宴会主持</a></span>
                    </div>
                    <div class='cont_top'>
                        <span class='dianli jibie'>主持人级别：</span>
                        <span><a href="#">不限</a></span>
                        <span><a href="#">首席9000-20000</a></span>
                        <span><a href="#">金牌6000-9000</a></span>
                        <span><a href="#">资深3000-6000</a></span>
                    </div>
                    <div class='cont_top'>
                        <span class='dianli'>排序方式：</span>
                        <span><a href="#">不限</a></span>
                        <span><a href="#">好评序列</a></span>
                        <!-- <span><a href="#">价格高 <i class='iconfont icon-jiantou-you'></i>低</a></span>
                        <span><a href="#">价格低 <i class='iconfont icon-jiantou-you'></i>高</a></span> -->
                        <span><a href="#">价格高 → 低</a></span>
                        <span><a href="#">价格低 → 高</a></span>
                    </div>
                </div>
                <div class="anchor_bottom">
                    <span>精准搜索：</span>
                    <input type="text" placeholder="支持人名字（可不填）" class='sousuo'>
                    <button class='btn_left'>搜索主持人</button>
                    <button class='btn_right'>清空筛选条件</button>
                </div>
            </div>
            <!-- 主持人表单结束 -->
            <!-- 筛选条件开始 -->
            <div class='screen'>
                <div class="kunag"></div>
                <div class='screen_info'>
                    <span>当前筛选条件：</span>
                    <span>2019年10月1日 上午 + 西式婚礼 + 首席9000-20000 ，</span>
                    <span>共有</span>
                    <span>10</span>
                    <span>位主持人可以为您服务！</span>
                </div>
            </div>
            <!-- 筛选条件结束 -->
            <!-- 主持人列表开始 -->
            <div class='anchor_list'>
                <ul class='anchor_info'>
                    <li><a href="#">
                            <img src="img/pic_1.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_2.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_3.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_4.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_5.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_6.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_7.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_8.png" alt="">
                            <div class='star_zhe'>
                                <img src="img/8zhe.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_9.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                    <li><a href="#">
                            <img src="img/pic_10.png" alt="">
                            <div class='star'>
                                <img src="img/star01.png" alt="">
                            </div>
                            <p class='anchor_price'>
                                <span class='anchor_price_left'>张俊</span>
                                <span class='anchor_price_right'>主持人价格：4000元</span>
                            </p>
                        </a></li>
                </ul>
            </div>
            <!-- 主持人列表结束 -->
        </div>
    </div>
    <!-- 中间内容结束 -->
    <!-- 底部开始 -->
    <div class='footer'>
        <div class='footer_warp'>
            <div class='footer_left'>
                <p class='footer_left_top'>联系我们</p>
                <p class='footer_left_content'>公司地址：北京市长安街天安门1号 / 监督电话：18812345678</p>
                <p class='footer_left_bottom'>copyright©2016-2019 版权归Ting域主持人所有 </p>
            </div>
            <div class='footer_right'>
                <div class='QR_left'>
                    <img src="img/QR_04.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img/QR_03.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
                <div class='QR_left'>
                    <img src="img/QR_02.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img/QR_01.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部结束 -->
    <!-- 固定定位导航布局开始 -->
    <div class="QR_right">
        <div class='QR_right_top'>
            <!-- <img src="img/QR_small.png" alt=""> -->
            <img src="img/QR_small.png" alt="">
            <div class='QR_box'>
                <div class='QR_box_content'>
                    <img src="img/QR_right.png" alt="">
                    <p class='QR_box_content_font'>关注官方二维码接受订单通知</p>
                </div>
                <div class='QR_box_triangle'>
                    <img src="img/sanjiao.png" alt="">
                </div>
            </div>
        </div>
        <a href="#">
            <div class='QR_right_bottom'>
                <img src="img/jiantou.png" alt="">
            </div>
        </a>
    </div>
    <!-- 固定定位导航布局结束 -->

    <!-- 右边二维码开始 -->
    <!--     <div class="QR_right">
        <div class='QR_right_top'>
            <img src="img/QR_small.png" alt="">
            <div class='QR_box'>
                <div class='QR_box_content'>
                    <img src="img/QR_right.png" alt="">
                    <p class='QR_box_content_font'>关注官方二维码接受订单通知</p>
                </div>
                <div class='QR_box_triangle'>
                    <img src="img/sanjiao.png" alt="">
                </div>
            </div>
        </div>
        <div class='QR_right_bottom'>
            <img src="img/jiantou.png" alt="">
        </div>

    </div> -->
    <!-- 右边二维码结束 -->
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // 导航的点击事件
    $(".nav_label li").click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    })
</script>
</html>
